<template>
	<view>
		<view class="infoList">
			<view class="infoItem" v-for="(item,index) in infoList" :key="index">
				<view class="ItemHeader">
					<view class="title">
						{{ item.typeName }}
					</view>
					<view class="date">
						{{ item.id }}
					</view>
				</view>
				<view class="ItemBody">
					<view v-if="item.typeName == '拖车'">
						<view class="tag">起点： <text>{{ item.position }}</text></view>
						<view class="tag">终点：<text>{{ item.end }}</text></view>
					</view>
					<view v-else class="tag">
						位置：<text>{{ item.position }}</text>
					</view>
					<view class="tag">
						车牌：<text>{{ item.carNum }}</text>
					</view>
					<view v-if="item.typeName == '拖车'" class="tag">
						车辆类型：<text>{{ item.carType }}</text>
					</view>
					<view class="tag">
						创建时间：<text>{{ item.time }}</text>
					</view>
					<view class="tag desc">
						描述信息：<text>{{ item.description }}</text>
					</view>
				</view>
				<view class="btn">
					<button @click="grabOrder(item)">抢单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
import BigNumber from 'bignumber.js';
	export default {
		data() {
			return {
				infoList: [],
				shopInfo:'',
			}
		},
		methods: {
			// 点击抢单按钮触发方法
			grabOrder(e){
				console.log(e)
				this.$request({
					url: 'socket/order',
					method: "PUT",
					data:{
						rescueTask: e,
						shopId: this.shopInfo.id
					},
					success:(res)=>{
						console.log("-----")
						console.log(res)
						let code = res.data.code
						if(code == 200){ // 接单成功
							this.sendMessage(this.shopInfo,e.uid)
							//	跳转页面
							uni.showToast({
								title: "接单成功",
								duration: 2000,
								icon: "success"
							});
							this.infoList = []
							this.getRedisTask()
							//location.reload();
						}else if(code == 601){ // 已被其他商家接单
							uni.showToast({
								title: "已被其他商家接单",
								duration: 2000,
								icon: "none"
							});
							this.infoList = []
							this.getRedisTask()
						}else if(code == 500){ // 订单过期
							uni.showToast({
								title: "订单超时",
								duration: 2000,
								icon: "none"
							});
							this.infoList = []
							this.getRedisTask()
						}
					}
				})
			},
			onLoad(){
				this.connect()
				this.shopInfo = uni.getStorageSync("shop")
				this.getRedisTask()
			},
			onShow(){
				// 监听 WebSocket 消息事件
				uni.onSocketMessage((res) => {
					let index = res.data.indexOf(":")
					let index1 = res.data.indexOf(",")
					let id = res.data.substring(index+1,index1)
					let data = JSON.parse(res.data)
					data.id = id
					console.log('接收到 WebSocket 消息:', data);
					this.infoList = this.infoList.concat(data)
					
				});
			},
			onUnload(){
				// 关闭websocket链接
				uni.closeSocket({
					success:(res)=>{
						console.log("关闭连接成功")
					},
					fail:()=>{
						console.log("关闭连接失败")
					}
				})
			},
		// 接单成功后向用户发送消息
			sendMessage(shopInfo,uid){
				this.$request({
					url: 'socket/websocket/toUser',
					method: 'POST',
					data: {
						shopInfo: shopInfo,
						uid: uid
					}
				})
			},	
		// 查询redis获得发给商家的信息
			getRedisTask(){
				this.$request({
					url: 'cfuser/rescue/task/redis/'+this.shopInfo.id,
					method: 'GET',
					success:(res)=>{
					console.log(res)
						let list = res.data.rows
						if( list.length > 0){
							for(let i = 0; i < list.length; i++ ){
								let index = list[i].indexOf(":")
								let index1 = list[i].indexOf(",")
								let id = list[i].substring(index+1,index1)
								if(!this.infoList.includes(JSON.parse(list[i]))){
									let info = JSON.parse(list[i])
									info.id = id
									this.infoList.unshift(info)
								}	
							}
						}
						// else{
						// 	uni.showToast({
						// 		title: "暂无救援订单",
						// 		duration: 2000,
						// 		icon: "none"
						// 	});
						// }
					},
				})
			},
		// webSocket相关方法
			// 连接
			connect(){
				uni.connectSocket({
					url: 'ws://127.0.0.1:8080/socket/websocket/2',
					success:()=>{
						console.log("连接成功")
					},
					fail:()=>{
						console.log("连接失败")
					}
				})
			},
			
		}
	}
</script>

<style>
	page{
		padding: 0rpx 20rpx;
	}
	.infoItem{
		margin-top: 20rpx;
		padding: 0rpx 20rpx;
		padding-bottom: 10rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	/* #ifdef MP-WEIXIN */
	.infoItem{
		width: 670rpx;
	}
	/* #endif */
	.ItemHeader {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 6rpx solid #f0f0f0;
		font-size: 32rpx;
	}
	.ItemHeader > .title{
		color: #2979ff;	
	}
	.ItemHeader > .date {
		font-size: 26rpx;
		color: #6a6a6a;
	}
	.ItemBody{
		padding: 10rpx 0 10rpx;
	}
	.tag {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}
	.tag > text{
		color: #6a6a6a;
	}
	.desc > text{
		max-width: 450rpx;
	}
	.slider{
		height: 60rpx;
		block-width: 20rpx;
		background-color: black;
	}
</style>
